<div class="car-content">
    <div class="main-img">
        <div class="img">
            <img src="https://www.dior.cn/beauty/zh_cn/store/skin/frontend/dior/pc/images/diorbg.jpg" alt="">
        </div>
    </div>
    <duv class="car-center">
        <div class="page">
            <div class="car-cen">
                <div class="col-left">
                    <div class="left-main">
                        <div class="left-title">
                            <p class="p-left">迪奥时装</p>
                            <p class="p1-left">尊享顺丰免费配送和七天无理由退货服务</p>
                        </div>
                        <div class="form">
                            <div class="check">
                                <input type="checkbox" id="select_all">
                                <span class="sp-check">全选</span>
                                <span class="sp-dan">单价</span>
                                <span class="sp-pro">总金额</span>
                            </div>



                        </div>
                    </div>
                </div>
                <div class="col-right">
                    <div class="right-con">
                        <h2 class="right-h2">您可以通过以下方式联系我们
                        </h2>
                        <div class="right-top">
                            <h3>迪奥时装</h3>
                            <div class="h3-top">
                                <ul class="ul-h3">
                                    <li class="li-h3">
                                        客户服务热线：400 122 66 22<br>(周一至周日 10:00 - 22:00)
                                    </li>
                                    <li class="li-h3">
                                        电子邮件:
                                        <a href="">contactdiorcn@christiandior.com</a>
                                    </li>
                                </ul>
                            </div>
                            <h3>迪奥美妆</h3>
                            <div class="h3-top">
                                <ul class="ul-h3">
                                    <li class="li-h3">
                                        客户服务热线：400 122 66 22<br>(周一至周日 10:00 - 22:00)
                                    </li>
                                    <li class="li-h3">
                                        电子邮件:
                                        <a href="">contactdiorcn@christiandior.com</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="right-und">
                        <p class="und-p1">Dior迪奥官网购物的特殊礼遇</p>
                        <p class="und-p2">免配送费</p>
                        <p class="und-p2">Dior迪奥美妆订单配以试用装礼赠</p>
                        <p class="und-p2">Dior迪奥艺术包装</p>
                    </div>
                </div>
            </div>
        </div>
    </duv>

</div>

<script src="./javascripts/jQuery.js"></script>
<script>
    $(function () {
        var cart = (function () {
            // 如果购物车数据存在,那么我们就把购物车数据变成对象； 
            // 如果购物车数据解释时报错我们就重新创建新的的购物车数据; 
            if (localStorage.getItem("cart")) {
                var data = null;
                try {
                    data = JSON.parse(localStorage.getItem("cart"));

                } catch (e) {
                    data = {};
                }

                return data;
            } else {
                return {};
            }
        })();
        console.log(cart);

        // 根据cart的数据渲染页面; 

        var html = "";

        // 拼接html结构 : 
        for (var attr in cart) {
            html += `   <div class="frist">
                            <div class="le-form">
                                <input type="checkbox" class="ch-check checkkk">
                              <a> <img src="${cart[attr].image}" alt=""></a> 
                                <div class="ch-title">
                                    <span class="sp1">${cart[attr].p2}</span>
                                    <span class="sp2">${cart[attr].p3}</span>
                                </div>
                                <div class="ch-count">
                                    <button class="reduce">-</button>
                                    <input type="text" value="${cart[attr].count}" class="number">
                                    <button class="plus">+</button>
                                </div>
                                <div class="ch-price">${cart[attr].price}</div>
                                <div class="ch-zprice">${cart[attr].count * cart[attr].price}</div>
                                <div class="option">
                                    <a class="de-a" href="javascript:void(0)" data-id="${attr}"><span class="iconfont icon-guanbi-01"></a>
                              </div>
                            </div>
                        </div>`
        }

        $(".form").append(
            html
        );

        $(".option .de-a").click(function () {
            $(this).parent().parent().parent().remove()
        })

        $("#select_all").change(function () {
            var $checkboxs = $(".form input[type=checkbox]:not(#select_all)");
            // 取出 select_all 的checked属性; 
            var type = $("#select_all").prop("checked");
            // 把属性进行批量赋值; 
            $checkboxs.prop("checked", type)
        })

        $(".reduce").click(function () {
            var n = $(this).next().val();
            var num = parseInt(n) - 1;
            if (num == 0) { return }
            $(this).next().val(num);
            var d = $(this).parent().next().html()
            $(this).parent().next().next().html(d * num)
          
        });


        $(".plus").click(function () {
            var n = $(this).prev().val();
            var num = parseInt(n) + 1;
            if (num == 0) { return; }
            $(this).prev().val(num);
            var d = $(this).parent().next().html()
            $(this).parent().next().next().html(d * num)
            
        });

       
    })
</script>